<template>
	<view>
		<u-sticky>
			<view class=" u-p-r-30 u-p-l-30 margin-zdy">
				<u-search placeholder="请输入车牌号或门店搜索" :clearabled="true" v-model="keyword" border-color="#606266" @custom="search" @search="search"></u-search>
				<u-radio-group v-model="orderByRadio" @change="radioGroupChange">
					<u-radio 
						@change="radioChange" 
						v-for="(item, index) in radioList" :key="index" 
						:name="item.name"
						:disabled="item.disabled"
					>
						{{item.name}}
					</u-radio>
				</u-radio-group>
			</view>
		</u-sticky>
		<u-card :title="item.roadWayCode" :sub-title="item.trainSeqStr" v-for="(item,index) in datalist" :key="index">
			<view class="" slot="body">
				<u-row>
					<u-col span="6" text-align="left">
							<view class="u-body-item-title u-line-2">平台号：{{item.dockPlat}}</view>
					</u-col>
					<u-col span="6" text-align="left">
							<view class="u-body-item-title u-line-2">车牌号：{{item.plateNumber}}</view>
					</u-col>
				</u-row>
				<u-row>
					<u-col span="12" text-align="left">
							<view class="u-body-item-title u-line-2">门店：{{item.clientName}}</view>
					</u-col>
				</u-row>
				<view gutter="16" class="flex-container row">
					<view class="flex-item bg-red" style="text-align: center;"  v-for="cnt1 in item.huoCnt" :key="cnt1">
						<text style="color: white;font-weight: 400;">货</text>
					</view>
					<view class="flex-item bg-blue" style="text-align: center;"  v-for="cnt2 in item.zhanCnt" :key="cnt2">
						<text style="color: white;font-weight: 400;">移</text>
					</view>
					<view class="flex-item bg-purple" style="text-align: center;"  v-for="cnt3 in item.kongCnt" :key="cnt3">
						<text style="color: white;font-weight: 400;">空</text>
					</view>
					<view class="flex-item bg-orange" style="text-align: center;"  v-for="cnt4 in item.chaoCnt" :key="cnt4">
						<text style="color: white;font-weight: 400;">超</text>
					</view>
				</view>
			</view>
		</u-card>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				orderBy:'',
				orderByRadio:'巷道顺序',
				keyword:'',
				datalist:[],
				radioList:[
					{
						name: '巷道顺序',
						disabled: false
					},
					{
						name: '送货顺序',
						disabled: false
					}
				]
			};
		}
		,onShow() {
			this.getDataList();
		},
		onPullDownRefresh() {
			this.getDataList();
			setTimeout(() => {
				uni.stopPullDownRefresh()
			}, 500)
		}
		,methods: {
			// 选中某个单选框时，由radio时触发
			radioChange(e) {
				if(e=="送货顺序"){
					this.orderBy = "1";
				}else{
					this.orderBy = "";
				}
				this.getDataList();
				 // console.log(e);
			},
			// 选中任一radio时，由radio-group触发
			radioGroupChange(e) {
				if(e=="送货顺序"){
					this.orderBy = "1";
				}else{
					this.orderBy = "";
				}
				 // console.log(e);
			},
			getDataList(){
				uni.showLoading({
					title: '加载中'
				})
				this.$http.post('/rest/hikAgvTaskController/RoadWayQuery',{
				},{
					params: {
						keyword:this.keyword,
						orderBy:this.orderBy
					},
					header: {
						'Authorization' :uni.getStorageSync('token'),
					}
				}).then(res => {
					uni.hideLoading()
					this.datalist = res.data
				})
			},
			search(e){
				this.getDataList();
			}
		}
	};
</script>

<style scoped lang="scss">
	
	.flex-container {  
	    display: flex;  
	    flex-wrap: wrap; /* 允许项目换行 */  
	    padding: 10px;  
	    box-sizing: border-box;  
	  } 
	  
	    .flex-item {  
	      width: 20px;  
	      height: 20px;  
	      margin: 5px;  
	      text-align: center;  
	      line-height: 20px;  
	      color: #333;  
	    } 
	  
	   /* flex-direction: row (默认值) */  
	    .flex-container.row {  
	      flex-direction: row;  
	    }  

	  /* flex-direction: column */  
	  .flex-container.column {  
	    flex-direction: column;  
	  }  
	.wrap {
		padding: 24rpx;
	}

	.u-row {
		margin: 20rpx 0;
	}

	.demo-layout {
		margin-right: 10rpx;
		height: 40rpx;
		width: 40rpx;
		border-radius: 8rpx;
	}

	.bg-purple {
		background: #d3dce6;
	}
	.bg-red {
		background: red;
	}

	.bg-blue {
		background: blue;
	}
	
	.bg-cyan {
		background: cyan;
	}
	
	.bg-orange {
		background: orange;
	}
</style>